<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2024-05-17 14:27:47
 * @LastEditTime: 2024-06-24 16:42:07
 * @LastEditors: Dxcr
-->
<template>
    <div class="index_container">
        <div id="WebGL" class="WebGL"></div>
        <div id="WebGL1" class="WebGL"></div>
    </div>
</template>
<script setup>
import {
    defineComponent,
    ref,
    reactive,
    computed,
    toRefs,
    onMounted
} from 'vue'
import { useRouter, useRoute } from 'vue-router';
import DxcrWebSocket from "dxcr-websocket"
import Waterfall from 'dxcr-waterfall'

const getRoute = useRoute()
const router = useRouter()
const data = reactive({
})

let webWorker;
let dom;
let dataIndex = 0;
let waterfall;
onMounted(() => {
    dom = document.getElementById("WebGL");
    initWaterfall()
    initWebSocket()
})

function initWaterfall(){
    console.log(dom)
    // 创建 pbt 实例
    waterfall = new Waterfall(dom);
}

function initWebSocket() {
    // let url = 'ws://192.168.239.196:8081/websocket/user-1'
    let url = `ws://localhost:3001`
    const ws = new DxcrWebSocket(url, null, {
        reconnectDelay: 1000,
        maxReconnectDelay: 30000,
        reconnectDelayFactor: 2,
        onOpen: (event) => {
            console.log('Connected to server')
            // 设置定时器，每隔一段时间发送心跳消息给服务器
            const heartbeatInterval = setInterval(() => {
                if (ws.readyState === WebSocket.OPEN) {
                    // 发送心跳消息给服务器（可以是任何需要发送的消息）
                    ws.send('heartbeat');
                }
            }, 5000); // 每5秒发送一次心跳消息，可以根据需求调整间隔时间
        },
        onMessage: (event) => {
            // console.log('WebSocket Received:', event.data)
            // console.time('解析json用时:')
            if (event.data instanceof ArrayBuffer) {
                const datas = new Int32Array(event.data);
                const index = dataIndex
                if(waterfall){
                    waterfall.addData(datas, index)
                }
                
            }
            // console.timeEnd('解析json用时:')
            // let datas = JSON.parse(event.data)
            // console.time('设置数据用时:')
            // console.timeEnd('设置数据用时:')
            console.log(`接受次数：${dataIndex}`)
            dataIndex++
        },
        onClose: (event) => console.log('Disconnected from server'),
        onError: (event) => console.error('WebSocket error:', event)
    });
}



</script>
<style lang="scss" scoped>
.index_container {

    .WebGL {
        width: 100%;
        height: 100%;
    }
}

:deep {}
</style>